import { Card, Form, Input, Button, Checkbox, message } from 'antd'
import { useDispatch } from 'react-redux'
import { useHistory } from 'react-router'
import { login } from '@/store/actions'
import logo from '../../assets/logo.png'
import styles from './index.module.scss'

const Login = () => {
    const dispatch = useDispatch()
    const history = useHistory()

    const onFinish = async values => {
        try {
            if (!values.remember) {
                return message.warning(
                    '请确定已阅读「用户协议」和「隐私条款」'
                )
            }

            const { mobile, code } = values
            await dispatch(login(mobile, code))
            message.success('登录成功', 1.5, () => {
                history.replace('/home')
            })
        } catch (e) {
            if (!e.response) {
                message.warning('网络繁忙，请稍后再试！')
            } else {
                message.error(e.response?.data?.message || '登录失败')
            }
        }
    }

    return (
        <div className={styles.root}>
            <Card className="login-container">
                <img className="login-logo" src={logo} alt="" />
                {/* 登录表单 */}
                <Form
                    size="large"
                    // 表单验证
                    validateTrigger={['onBlur', 'onChange']}
                    // 点击提交触发的事件
                    onFinish={onFinish}
                    // 默认值
                    initialValues={{
                        mobile: '13911111111',
                        code: '246810',
                        remember: true,
                    }}
                >
                    {/* 手机号 */}
                    <Form.Item
                        name="mobile"
                        rules={[
                            // 必填
                            { require: true, message: '手机号是必填项' },
                            // 格式验证
                            {
                                pattern: /^1[3-9]\d{9}$/,
                                message: '手机号码格式不对',
                                validateTrigger: 'onBlur',
                            },
                        ]}
                    >
                        {/* maxLength：最大可输入的数 */}
                        <Input maxLength={11} placeholder="请输入手机号" />
                    </Form.Item>
                    {/* 验证码 */}
                    <Form.Item
                        name="code"
                        rules={[
                            // 必填
                            { require: true, message: '请输入验证码' },
                            // 格式验证
                            {
                                len: 6,
                                message: '验证码6个字符',
                                validateTrigger: 'onBlur',
                            },
                        ]}
                    >
                        {/* maxLength：最大可输入的数 */}
                        <Input maxLength={6} placeholder="请输入验证码" />
                    </Form.Item>
                    {/* 复选框 */}
                    <Form.Item name="remember" valuePropName="checked">
                        <Checkbox className="login-checkbox-label">
                            我已阅读并同意「用户协议」和「隐私条款」
                        </Checkbox>
                    </Form.Item>
                    {/* 登录按钮 */}
                    <Form.Item>
                        <Button
                            type="primary"
                            htmlType="submit"
                            size="large"
                            block
                        >
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </Card>
        </div>
    )
}

export default Login
